<template>
  <div class="digitalManage pl-5 pr-5 pt-4">
    <h2 class="m-3">遂宁数字化智能管理平台</h2>
    <hr class="m-3"/>
    <!--三个模块-->
    <div class="top mt-4 row">
      <div class="col-4">
        <div class="model1 m-3 p-3 row">
          <div class="col-5">
            <img src="~@/assets/img/cost3.png"  width="100%" />
          </div>
          <div class="col-7">
            <div class="info d-flex">
              <div class="title">收入</div>
              <div :class="{infoActive:isClick==0}"  @click="isClick=0">当月：100，00</div>
              <div :class="{infoActive:isClick==1}"  @click="isClick=1">今年：100，00</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="model2 m-3 p-3 row">
          <div class="col-5">
            <img src="~@/assets/img/cost3.png"  width="100%" />
          </div>
          <div class="col-7">
            <div class="info d-flex">
              <div class="title">费用</div>
              <div :class="{infoActive:isClick==2}"  @click="isClick=2">当月：100，00</div>
              <div :class="{infoActive:isClick==3}"  @click="isClick=3">今年：100，00</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="model3 m-3 p-3 row">
          <!--<div class="col-5">-->
            <!--<img src="~@/assets/img/cost3.png"  width="100%" />-->
          <!--</div>-->
          <div class="col-12">
            <div class="info d-flex">
              <div>投入产出比：<span class="font-weight-bold">80%</span></div>
              <div>人均利润：<span class="font-weight-bold">80%</span></div>
              <div>万元工资利润率：<span class="font-weight-bold">80%</span></div>
              <div>服务费占企业经营收入占比：<span class="font-weight-bold">80%</span></div>
              <!--<div :class="{infoActive:isClick==5}"  @click="isClick=5">今年：100，00</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--表格-->
    <div class="content mt-4">
      <div class="row">
        <div class="col-12 mb-2">
          设置目标
        </div>
      </div>
      <table class="table table-hover table-bordered table-striped" style="table-layout:fixed;">
        <thead class="">
          <tr>
            <th  rowspan="2">项目</th>
            <th  colspan="2">a</th>
            <th  colspan="2">b</th>
            <th  colspan="2">c</th>
          </tr>
          <tr>
            <td>目标</td>
            <td>实际</td>
            <td>目标</td>
            <td>实际</td>
            <td>目标</td>
            <td>实际</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1号</td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
          </tr>
          <tr>
            <td>1号</td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
          </tr>
          <tr>
            <td>1号</td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
          </tr>
          <tr>
            <td>1号</td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
          </tr>
          <tr>
            <td>1号</td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
            <td><input type="text"/></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'budget',
  data () {
    return {
      isClick:6
    }
  }
}
</script>

<style scoped>
  .digitalManage{
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    background: rgba(238, 238 ,238,0.9);
    /*background: #eeeeee;*/
    overflow-y: scroll;
    padding: 20px;
  }
  .digitalManage h2{
    letter-spacing: 6px;
    font-size: 30px;
    font-weight: bold;
    color: #005cbf;
    text-shadow: 4px 4px 6px #95999c;
  }
  .digitalManage .top .title{
    font-size: 24px;
    letter-spacing: 5px;
    margin-bottom: 10px;
  }

  .digitalManage .top .model1{
    background: white;
    background: #e0a800;
    background: #1874CD;
    /*background-image: linear-gradient(#2575fc,#6a11cb);*/
    /*background-image: linear-gradient(#00c6fb,#005bea);*/
    color: white;
  }
  .digitalManage .top .model2{
    background: #20c997;
    background: #1C86EE;
    /*background-image: linear-gradient(#00c6fb,#005bea);*/
    color: white;
  }
  .digitalManage .top .model3{
    background: #dc3545;
    background: 	#1874CD;
    /*background-image: linear-gradient(#6a11cb,#2575fc);*/
    /*background-image: linear-gradient(#00c6fb,#005bea);*/
    color: white;
  }
  .digitalManage .content{
    padding: 0 15px;
  }
  .digitalManage table{
    background: white;
  }
  .digitalManage table tr td,
  .digitalManage table tr th{
    text-align: center;
    vertical-align: middle;
    color: #5a6268;
  }
  .digitalManage table input{
    border: none;
    background: transparent;
    width: 100%;
  }
  .digitalManage .info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 18px;
  }
  .infoActive{
    color: black;
    text-decoration: underline;
  }



  /*修改滚动条样式*/
  .digitalManage::-webkit-scrollbar{
    width:10px;
    height:10px;
    /**/
  }
  .digitalManage::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius:2px;
  }
  .digitalManage::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
  }
  .digitalManage::-webkit-scrollbar-thumb:hover{
    background: #333;
  }
  .digitalManage::-webkit-scrollbar-corner{
    background: #179a16;
  }
</style>
